<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册页面- 跑步打卡监控平台</title>
    <!-- base:css -->
    <link rel="stylesheet" href="/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="/vendors/css/vendor.bundle.base.css">
    <!-- endinject -->
    <!-- inject:css -->
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/izitoast/iziToast.min.css" />
    <!--    <link rel="stylesheet" href="/css/site.css" />-->
</head>
<body>
<div class="container-scroller d-flex">
    <div class="container-fluid page-body-wrapper full-page-wrapper d-flex">
        <div class="content-wrapper d-flex align-items-center auth px-0">
            <div class="row w-100 mx-0">
                <div class="col-lg-4 mx-auto">
                    <div class="auth-form-light text-left py-5 px-4 px-sm-5" id="app">
                        <div class="brand-logo">
                            <img src="../../images/logo.svg" alt="logo">
                        </div>
                        <h4>你好!欢迎加入我们</h4>
                        <h6 class="font-weight-light">注册系统.</h6>
                        <form class="pt-3">
                            <div class="form-group">
                                <input type="text" class="form-control form-control-lg"
                                       id="inputuserName" v-model="joinDto.userName" placeholder="用户名">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control form-control-lg"
                                       id="inputPassword" v-model="joinDto.password" placeholder="密码">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control form-control-lg"
                                       id="inputenpassword" v-model="joinDto.enPassword" placeholder="确认密码">
                            </div>
                            <div class="mt-3">
                                <button type="button" class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn"
                                        v-on:click="login" >注册</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<script src="/js/vue.js"></script>
<!--<script src="/js/vue.min.js"></script>-->
<!-- base:js -->
<script src="/vendors/js/vendor.bundle.base.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/izitoast/iziToast.min.js"></script>
<script src="/izitoast/iziToast.init.js"></script>

<!-- endinject -->
<!-- inject:js -->
<script src="/js/off-canvas.js"></script>
<script src="/js/hoverable-collapse.js"></script>
<script src="/js/template.js"></script>
<!-- endinject -->
<script type="text/javascript">
    let loginVue=  new Vue({
        el:'#app',
        data(){
            return{
                joinDto:{
                    userName:"",
                    password:"",
                    enPassword:""
                }
            }
        },
        created:function(){
            let that = this;
        },
        methods: {
            login(){
                let that = this;
                console.log("注册中");
                if(that.joinDto.userName.length<6){
                    alert("用户名输入不规范");
                    return;
                }
                if(that.joinDto.password.length<6||that.joinDto.enPassword.length<6){
                    alert("密码输入不规范");
                    return;
                }
                console.log(that.joinDto);
                if (that.joinDto.password!=that.joinDto.enPassword){
                    alert("两次密码输入不一致,请重新输入");
                    that.joinDto.password="";
                    that.joinDto.enPassword="";
                    return;
                }
                axios.post('/auth/tojoin',that.joinDto,{
                    headers:{'Content-Type':'application/json'}
                })
                    .then(function(res){
                        if(res.status==200){
                            welcome("欢迎加入:"+that.joinDto.userName,"请登录！",
                                500,function(){
                                window.location.href="/auth/login";
                            });
                        }
                        if (res.status==402){
                            errorMsg("注册失败","用户名已存在");
                            return;
                        }
                        console.log(res);

                    }).catch(function (error) {
                        if (error.response){
                            // 请求已发出，但服务器响应的状态码不在 2xx 范围内
                            console.log(error.response.data);
                            if (error.response.data.code=="Repeat"){
                                errorMsg("注册失败",error.response.data.message)
                                return;
                            }
                            errorMsg("注册失败","输入的用户名或密码不规范!")
                        }
                     });
            }
        },
    });
</script>
</body>
</html>
